<template>
  <view class="animated fadeIn faster ">
    <view class="bg-main viewMain" style="height: 280rpx;">
      <view class="d-flex d-flex-between px-2 d-flex-middle pt-3">
        <view class="searchBox d-flex-item d-flex d-flex-middle">
          <text class="iconfont icon-icon_sousuo text"></text>
          <input class="pl-2  rounded30 font26 d-flex-item" v-model="formData.name" placeholder="搜索题库，文章，作者"
                 placeholder-class="colorhold"/>
          <text v-if="formData.name" class="text-right iconfont icon-jiufuqianbaoicon08 main-color ml-1"
                @click="dataCancel"></text>
        </view>
        <view class="ml-2 headimg  bg-eee" @click="goMy">
          <image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241223141109-ac38c1fa-47fb-46f8-83fc-1f37a1474265.png" mode="aspectFill"></image>
        </view>
      </view>

      <view class="mx-2 py-2">
        <swiper indicator-dots autoplay :interval="5000" :duration="1000" indicator-active-color="#ffffff"
                indicator-color="#c6c8c5" class="position-relative"
                style="width:100%;height: 260rpx;border-radius:30rpx;overflow: hidden;">
          <block v-for="(item,idx) in banner" :key="idx+'a'">
            <swiper-item>
              <view class="swiper-item">
                <image :src="item.image" mode="aspectFill" lazy-load
                       style="width:100%;height: 260rpx;border-radius: 30rpx;" @click="goUrl(item.url)">
                </image>
              </view>
            </swiper-item>
          </block>
        </swiper>
      </view>
    </view>

<!--    <NoticeBar class="border-main" :notices="notices"/>-->

    <!-- 分类导航模块 -->
    <view class="bg-white pt-3 pb-2">
      <swiper
          class="type-swiper"
          :indicator-dots="false"
          :autoplay="true"
          :interval="90000"
          :duration="1000"
          circular
          @change="onSwiperChange"
      >
        <block v-for="(page, pageIndex) in categoryPages" :key="pageIndex">
          <swiper-item>
            <view class="d-flex">
              <view
                  v-for="(item, index) in page"
                  :key="index"
                  class="text-center d-flex d-flex-middle d-flex-column"
                  @click="goCategory(item)"
                  style="width: 20%"
              >
                <image :src="item.icon" class="type-icon mb-1" mode="aspectFit"></image>
                <text class="type-txt font22 color444 ">{{ item.title }}</text>
              </view>
            </view>
          </swiper-item>
        </block>
      </swiper>

      <!-- 自定义指示器 -->
      <view class="custom-indicator" v-if="categoryList.length > 5">
        <view
            v-for="(page, index) in categoryPages"
            :key="index"
            class="indicator-line"
            :class="{ 'active': currentPage === index }"
        ></view>
      </view>

    </view>

    <!-- 在页面模板中添加今日推荐模块 -->
    <view class="column-model bg-white px-2 py-2 pt-0">
      <view class="column-box d-flex d-flex-between d-flex-middle pb-2">
        <view class="title-box">
          <text class="iconfont icon-huo font30 colorf00"></text>
          <text class="font30 ml-1">今日推荐</text>
        </view>
        <view class="see-more-btn font24 color598dfc" @click="goMoreRecommend">
          查看更多
          <text class="iconfont icon-arrow-right font24 color444"></text>
        </view>
      </view>

      <scroll-view
          class="recommend-scroll"
          scroll-x
          show-scrollbar="false"
          enhanced
          :indicator-dots="false"
      >
        <view class="d-flex">
          <view
              class="recommend-data-box d-flex d-flex-column mr-2"
              v-for="(item, index) in recommendList"
              :key="index"
              @click="goStudy(item.id)"
          >
            <image
                class="recommend-picture"
                :src="item.image"
                mode="aspectFill"
            ></image>
            <view class=" mt-2">
              <view class="text-clamp font26">{{ item.title }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>


    <view class="column-model bg-white px-3 py-2 pt-0 triangle-arrow-r">
      <view class="column-box d-flex   d-flex-between  d-flex-middle pb-2">
        <text class="font30 ml-1">我的课程</text>
       <view>
         <text class="mr-2 font24 " style="color: #77abff">查看更多</text>
         <text style="color: #77abff">|</text>
         <text class="ml-2 font24 " style="color: #77abff">合并课程</text>
       </view>
      </view>

      <view class="triangle-arrow"></view>
      <view class="d-flex font28 course-category p-2 rounded20 d-flex-wrap" >
        <view  v-for="(item,index) in courseCategories" :key="index+'1'"
              class="px-2 grab my-1" @click="getType(item.id,index)"
              :class="{'grabClassActive':tabsIndex == item.id}">
          {{ item.name }}
        </view>
      </view>
    </view>

    <view class="px-3">
      <view
          class="colorf7f7f7 d-flex mb-3 p-2 rounded20"
          v-for="(item, index) in recommendList"
          :key="index"
          @click="goStudy(item.id)"
      >
        <image
            class="recommend-picture"
            :src="item.image"
            mode="aspectFill"
        ></image>
        <view class="recommend-content-box ml-3 d-flex-item ">
          <view class="recommend-txt font28 mb-1 text-ellipsis-2">{{ item.title }}</view>
          <view class="recommend-num font22 color999 mb-1">{{ item.participants }}人参加</view>
          <view
              class="amount-status font22 px-2 py-1 colorf00"
              :class="item.type === 'vip' ? 'vip-color' : 'price-color'"
          >
            {{ item.type === 'vip' ? '会员' : '￥' + item.price }}
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import {
  mapState
} from "vuex"
import {homeApi} from '@/http/homeApi.js';
import NoticeBar from '@/components/notice-bar/index.vue'
export default {
  components: {
    NoticeBar
  },
  data() {
    return {
      formData: {
        name: ''
      },
      banner: [
        {
          image: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/exam/718-20230505194915-20230828151536.jpg',
          url: ''
        }
      ],
      notices:[{content:'第一条信息'}],
      categoryList: [
        {
          icon: 'https://cdn.lubanschool.cn/type1-btn-20230814101336.png?e=1691982816&token=:dbtN7zj9YTeT9hQo25Wlj9yHZxA=',
          title: '积分商城',
          url: '/pages/mall/mallIndex'
        },
        {
          icon: 'https://cdn.lubanschool.cn/type2-btn-20230814102022.png?e=1691983222&token=:Kct7ey45_3OH-ACvj8V-E9-alR0=',
          title: '优惠套餐',
          url: '/pages/package/packageList'
        },
        {
          icon: 'https://cdn.lubanschool.cn/type3-btn-20230814102055.png?e=1691983256&token=:MWCnkPWZVrva_NYB_wWDDlNPsyc=',
          title: '会员卡',
          url: '/pages/member/memberDetails'
        },
        {
          icon: 'https://cdn.lubanschool.cn/type4-btn-20230814102138.png?e=1691983299&token=:EX0KjDat2ycL8DeAZOfuSV2g6Q0=',
          title: '领卷中心',
          url: '/pages/coupon/couponList'
        },
        {
          icon: 'https://cdn.lubanschool.cn/type5-btn-20230814102211.png?e=1691983332&token=:ULe6h7X1WmPDVqYbO2W_Qjmt96M=',
          title: '每日签到',
          url: '/pages/sign/signPage'
        },
        {
          icon: 'https://cdn.lubanschool.cn/type6-btn-20230814102253.png?e=1691983373&token=:xvOyXyk1FXbfGyovbrPfld3P3RM=',
          title: '问卷调查',
          url: '/pages/survey/surveyList'
        },
        {
          icon: 'https://cdn.lubanschool.cn/type7-btn-20230814102311.png?e=1691983391&token=:maHEosCrYqVpqg5--d8H--q_Y5Y=',
          title: '任务中心',
          url: '/pages/task/taskCenter'
        },
        {
          icon: 'https://cdn.lubanschool.cn/type8-btn-20230814102350.png?e=1691983431&token=:_dtA4CPLZkuOUysU2Z1EXa_WFaU=',
          title: '新闻资讯',
          url: '/pages/news/newsIndex'
        }
      ],
      currentPage: 0,
      recommendList: [
        {
          id: '1135929433643810816',
          image: 'https://cdn.lubanschool.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230801133413-20230801133755.png?e=1690871875&token=:4WBJdA3m-3Cp1mFoKWRCmUVAyc8=',
          title: '正极管检测',
          participants: 3171,
          type: 'vip'
        },
        {
          id: '1135928798756208640',
          image: 'https://cdn.lubanschool.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230801133335-20230801133524.png?e=1690871725&token=:DDOBWTWv5FQl2qn5j3Jvdkxt8Lc=',
          title: '定子绝缘检测',
          participants: 987,
          type: 'vip'
        },
        {
          id: '1135920226609659904',
          image: 'https://cdn.lubanschool.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230801125622-20230801130005.png?e=1690869606&token=:TRya6yjh-XYAK5FabKY1uKpUjhc=',
          title: '转子绕组检测',
          participants: 659,
          type: 'vip'
        },
        {
          id: '1134964426932224000',
          image: 'https://cdn.lubanschool.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230729214226-20230729214253.jpg?e=1690641774&token=:v_2UaCCEVk5sSv2_f0B_5YtYw8Q=',
          title: '汽修技能高考同步器在线开放课程',
          participants: 1918,
          type: 'price',
          price: 400
        }
      ],
      courseCategories: [
        {
          name: '全部',
          value: ''
        },
        {
          name: '汽修技能高考曲轴',
          value: 'qz'
        },
        {
          name: '汽修技能高考气缸',
          value: 'qigang'
        },
        {
          name: '汽修技能高考同步器',
          value: 'tbq1'
        },
        {
          name: '汽修技能高考发电机',
          value: 'fadianji1'
        }
      ],
      tabsIndex:0,
    }
  },
  computed: {
    ...mapState({
      avatar: state => state.avatar
    }),
    // 将分类列表分页，每页4个
    categoryPages() {
      const pages = [];
      const itemsPerPage = 5;
      for (let i = 0; i < this.categoryList.length; i += itemsPerPage) {
        pages.push(this.categoryList.slice(i, i + itemsPerPage));
      }
      return pages;
    }
  },
  onLoad() {
  },
  methods: {
    // 搜索功能
    onSearch() {
    },
    // 清除搜索
    dataCancel() {
      this.formData.name = ''
    },
    // 跳转到个人中心
    goMy() {
      uni.navigateTo({
        url: '/pages/my/my'
      })
    },
    // 跳转到分类页面
    goCategory(item) {
      if (item.url) {
        uni.navigateTo({
          url: item.url
        })
      }
    },
    // 获取数据
    async getCarry() {
      this.loading = true
      try {
        let res = await homeApi.getCarryType({
          name: this.formData.name
        })
        this.list = res
        this.loaded = true
      } catch (error) {
        console.error('获取数据失败:', error)
      } finally {
        this.loading = false
      }
    },
    onSwiperChange(e) {
      this.currentPage = e.detail.current;
    },
    // 跳转到更多推荐
    goMoreRecommend() {
      // uni.navigateTo({
      //   url: '/pages/course/courseList'
      // })
    },

    // 去学习
    goStudy(id) {
      // 这里可以添加跳转到具体课程详情页的逻辑
      console.log('去学习课程:', id)
      // 示例跳转
      // uni.navigateTo({
      //   url: `/pages/course/detail?id=${id}`
      // })
    }
  }
}
</script>

<style scoped>
.viewMain {
  margin-bottom: 90rpx;
}
.searchBox {
  background-color: #f5f5f5;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
}

.searchBox input {
  height: 100%;
}

.headimg {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  overflow: hidden;
}

.headimg image {
  width: 100%;
  height: 100%;
}


.type-swiper {
  height: 120rpx;
  width: 100%;
}

.type-icon {
  width: 70rpx;
  height: 70rpx;
  margin-bottom: 10rpx;
}

/* 自定义指示器样式 - 横线形式 */
.custom-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10rpx 0;
}

.indicator-line {
  width: 30rpx;
  height: 6rpx;
  background-color: #c6c8c5;
  border-radius: 0;
  margin: 0 5rpx;
  transition: all 0.3s ease;
}

.indicator-line.active {
  background-color: #007AFF;
  width: 50rpx;
}
/* 今日推荐模块样式 */


.recommend-txt {
  color: #333;
  line-height: 1.4;
}

.recommend-scroll {
  width: 100%;
  white-space: nowrap;
  padding-bottom: 10rpx;
}

.recommend-data-box {
  width: 280rpx;
  display: inline-flex;
}

.recommend-picture {
  width: 280rpx;
  height: 150rpx;
  border-radius: 10rpx;
}


.grabClassActive {
  background-color: #598dfc;
  color: #fff;
}


.course-category{
  background-color: #e8f4ff;
}

.course-category .grab {
  border-right: 2rpx solid #cedeef;
}

.course-category .grab:last-child {
  border-right: 0 solid #f4f6fa;
}

.triangle-arrow-r {
  position: relative;
}

/* 优化后的三角形箭头样式 */
.triangle-arrow {
  position: absolute;
  top: 42rpx;
  right: 50rpx;
  width: 0;
  height: 0;
  border-left: 20rpx solid transparent;
  border-right: 20rpx solid transparent;
  border-bottom: 20rpx solid #e8f4ff;
  transform: translateX(-50%);
  z-index: 10;
}


.colorf7f7f7 {
  background: #f7f7f7;
}

/* #ifdef H5 */
.recommend-scroll::-webkit-scrollbar {
  display: none;
}

.recommend-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

::-webkit-scrollbar{
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
/* #endif */


</style>
